<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html lang="zh-CN">

<head>
<title>赌我会瘦</title>
<%@ include file="/WEB-INF/include/meta.jsp"%>
<%@ include file="/WEB-INF/include/css.jsp"%>
</head>
<!-- end header -->

<body>
  <div class="page-group">
    <div class="page page-current close-page bg-light-gray">
      <header class="bar bar-nav fb-header has-img-header">
        <a href="javascript:void(0);" class="pull-left logo"> <img src="${ctx.resource}/images/rule-header-left.png">
        </a>
        <h1 class="title">
          <img src="${ctx.resource}/images/rule-header-title-black.png">
        </h1>
        <a href="javascript:void(0);" class="pull-right user-cover"> <img src="${user.avatar}">
        </a>
      </header>

      <c:if test="${userBet.status eq 'PROCESSING'}">
        <div class="bar bar-footer fb-footer">
          <a href="javascript:void(0);" id="submit" class="button button-big fb-button">递交最终成绩</a>
        </div>
      </c:if>

      <div class="content">
        <div class="content-padded challenger-info">
          <div>

            <c:if test="${userBet.status eq 'PROCESSING'}">
              

              <div class="video-layout">
                <div class="video-header" style="padding-top: 0;">
                  <span style="font-size: .7rem; color: #999;">初始体重</span><br>${userBet.beforeWeight}<span style="font-size: .9rem; font-weight: 500;">kg</span>
                </div>
                <div class="video-content">
                  <div id="beforeShowVideo" style="width: 100%; height: 11rem;" data-video="${userBet.beforeVedio}"></div>
                </div>
              </div>
              
              <p class="color-red no-margin" style="font-size: .8rem;">结果体重<small>&nbsp;(KG)&nbsp;</small>:</p>
              <!-- <div class="item-input" style="margin-top: .25rem;">
                <input type="text" name="weight" placeholder="请填写您的当前体重(KG)" style="border-radius: .25rem;" />
              </div> -->
              <div class="slider-ruler">
                <input type="hidden" name="weight" value="" />
						    <div id="slider-box"></div>
                <div class="value text-center" style="margin-top: .25rem;font-size: .6rem; line-height: 1;"><span style="font-size: 1.6rem;"></span>kg</div>
						    <p class="no-margin text-center" style="font-size: .6rem;">体重</p>
						  </div>

              <div class="item-input clearfix video-uploadarea">

                <div class="file-input-wrapper">
                  <!-- <a href="javascript:void(0);" id="uploadVideo" class="video-button btn-file-input" style="height: 2.2rem; color: #CD2233; position: relative; display: block;"> 审核视频<small>（请拍摄体重秤与全身视频）</small><i class="iconfont icon-camera pull-right" style="font-size: 1.2rem;"></i>
                  </a> -->
                  <a href="${ctx.host}/profile/bets/${userBet.bet.id}/vedio-upload?phase=close" id="uploadVideo" class="video-button btn-file-input" style="height: 2.2rem; position: relative; display: block;"> 上传结果视频<i class="iconfont icon-camera pull-right"
                    style="font-size: 1.2rem; margin-top: -.2rem;"></i>
                  </a> <input type="file" name="selectVideo" accept="video/*" capture="camcorder" />
                </div>
                <input type="hidden" name="selectVideoPath" />
                <a href="javascript:void(0);" id="exampleVedio" class="pull-right" style="font-size: .7rem; color: #fff; background-color: #131313; margin-top: .2rem; padding: 0 5px; display: inline-block;">查看范例视频</a>
              </div>
              
              <div class="video-showarea hide" id="showVideo" style="position: relative; width: 100%; height: 11rem;" data-video="${userBet.beforeVedio}">
                <div class="close" style="position: absolute; text-align: center; right: 0px;top: 0px;z-index: 10000000;width: 80px;height: 30px;font-size: .7rem;color: #fff; line-height: 30px; background-color: rgba(201, 40, 59, .6);border-radius: 3px;">删除视频</div>
              </div>

              <div class="tips">
                <p class="no-margin" style="color: #2b2b2b; font-weight: bold;">TIPS:</p>
                <div class="no-margin">
                  <p class="no-margin">·&nbsp;视频拍摄建议穿着修身服饰;</p>
                  <p class="no-margin">·&nbsp;拍摄内容须包含面部、全身及称重数字。</p>
                </div>
              </div>
            </c:if>
          </div>
        </div>
      </div>
    </div>
  </div>
  <%@ include file="/WEB-INF/include/script.jsp"%>
  <d:resource type="script" root="${ctx.resource}/build" src="js/page/profile/bet-close.js" />
  <script type="text/javascript">
    require(['page/profile/bet-close'], function(page) {
      page.init({
        jsConfig: JSON.parse('${jsConfig}'),
        betId: '${userBet.bet.id}',
        userId: '${userBet.user.id}',
        userName: '${userBet.user.nickname}',
        afterVideo: '${userBet.afterVedio}',
        avatar: '${userBet.user.avatar}',
        "url": window.__CTX__.domain + "/users/" + "${user.id}" + "/bets/" + "${userBet.bet.id}" + "/share",
        "status": '${userBet.status}'
      })
    })
  </script>
</body>
</html>